﻿<div ng-init="currentTab='events'" ng-include="'Views/Menu/NewsCalendarEventMenu.html'"></div>

<div>
    
    <div>
        <button class="btn-green" style="width: 140px;" ng-click="eventsList.addEvent()">Add Event</button><br /><br />    
    </div>

    <form role="form" name="myform" novalidate>
        <div class="container-fluid">
            <div class="row">

                <div class="col-xs-5">
                    <select class="form-control input-sm" ng-model="eventsList.eventsFilter.type">
                        <option value="">Any Type</option>
                        <option ng-repeat="eventType in eventsList.eventsTypes" value="{{eventType.id}}">{{eventType.name}}</option>
                    </select>
                </div>
                <div class="col-xs-5" ng-class="{'has-error': myform.term.$invalid}" style="min-height:68px">
                    <input type="text" name="term" ng-minlength="3" class="search-inp form-control input-sm" placeholder="Search Criteria" ng-model="eventsList.eventsFilter.term" />
                    <input type="submit" class="search-btn" ng-click="eventsList.search();" value="" />
                    <p class="help-block" ng-if="myform.term.$invalid">The searched text must be at least 3 characters long.</p>
                </div>
                <div class="col-xs-2" />
            </div>
        </div>
    </form>
    


   
    <!---->
    <div ng-show="eventsList.eventsPaged.totalItemsCount > 0">
        <div style="display: table; width: 81%; float: left;">
            <div class="table-row">
                <div class="table-head"><input type="checkbox" ng-model="eventsList.selectAll"></div>
                <div class="table-head"><a href="" ng-click="eventsList.changeOrderBy('NameLowerCase');" ng-class="eventsList.orderByCol === 'NameLowerCase' ? (eventsList.orderByColAsc ? 'sortable_up' : 'sortable_down') : null">Event Name</a></div>
                <div class="table-head"><a href="" ng-click="eventsList.changeOrderBy('StartDate');" ng-class="eventsList.orderByCol === 'StartDate' ? (eventsList.orderByColAsc ? 'sortable_up' : 'sortable_down') : null">Start Date</a></div>
                <div class="table-head"><a href="" ng-click="eventsList.changeOrderBy('EndDate');" ng-class="eventsList.orderByCol === 'EndDate' ? (eventsList.orderByColAsc ? 'sortable_up' : 'sortable_down') : null">End Date</a></div>
                <div class="table-head"><a href="" ng-click="eventsList.changeOrderBy('AddedByNameLowerCase');" ng-class="eventsList.orderByCol === 'AddedByNameLowerCase' ? (eventsList.orderByColAsc ? 'sortable_up' : 'sortable_down') : null">Added by</a></div>
                <div class="table-head"><a href="" ng-click="eventsList.changeOrderBy('Status');" ng-class="eventsList.orderByCol === 'Status' ? (eventsList.orderByColAsc ? 'sortable_up' : 'sortable_down') : null">Status</a></div>
                <div class="table-head">Sponsorship</div>
            </div>

            <div class="table-row" ng-repeat="item in eventsList.eventsPaged.items">
                <div class="table-col"><input type="checkbox" ng-model="item.selected"></div>
                <div class="table-col">
                    <a href="" style="overflow:hidden; display: inline-block; max-width: 372px; text-overflow: ellipsis;"
                       ng-click="eventsList.editEvent(item.id);"
                       title="{{item.name}}">
                        {{ item.name && item.name.length > 50 ? item.name.substring(0, 50) + '...' : item.name }}
                    </a>
                </div>
                <div class="table-col">{{item.startDate | date: 'MMM d, y'}}</div>
                <div class="table-col">{{item.endDate | date: 'MMM d, y'}}</div>
                <div class="table-col">{{item.addedbyUserName}}</div>
                <div class="table-col"><span class="green">{{$parent.eventsList.eventsStatusesDic[item.status].name}}</span></div>
                <div class="table-col">
                    <span class="green" ng-show="item.sponsorship"> Yes </span>
                    <span class="green" ng-hide="item.sponsorship"> No </span>
                </div>
            </div>
        </div>
        <div style="display: table; width: 13%; float: left;">
            <div class="table-row">
                <div class="table-col sel-items">
                    <div class="title-sel-items">
                        Events Selected: <span style="color: #24b1a8;">{{ eventsList.getSelectedItems().length }}</span>
                    </div>
                    <br /><br />
                    <button class="btn-green" style="width: 120px;" ng-click="eventsList.deleteSelectedEvents()">Delete Events</button><br /><br />
                    <button class="btn-green" style="width: 120px;" ng-click="eventsList.publishSelectedEvents()">Publish Events</button>
                </div>
            </div>
        </div>
        <div class="clear">&nbsp;</div>
        <sustainalytics-pager></sustainalytics-pager>
    </div>

        <div ng-show="!eventsList.eventsPaged || !eventsList.eventsPaged.items || eventsList.eventsPaged.items.length == 0" style="text-align: center;">
            <br />
            <br />
            <b>No articles found matching the search criteria</b>
        </div>
</div>